<template>
  <view class="mt-input-select">
    <view v-if="showSelect && list.length > 0" class="mt-input-select_mask" @click="showSelect = false"></view>
    <view class="mt-input-select_content">
      <view class="input-box" :class="{ 'no-border': !inputBorder }">
        <input
          v-model="keyword"
          class="ipt"
          type="text"
          :disabled="disabled"
          :placeholder="placeholder"
          :maxlength="maxlength"
          @input="handleInput"
        />
        <image
          v-if="keyword.length && clearable"
          class="close"
          src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-circle-close.svg"
          @click="handleClear"
        ></image>
      </view>
      <view v-if="showSelect && list.length > 0" class="mt-input-select_box" :style="contentStyle">
        <scroll-view scroll-y style="max-height: 400rpx">
          <view v-for="(item, index) in list" :key="item[value]" @click="handleClickItem(item)">
            <slot :row="item" :index="index">
              <view class="select-li">{{ item[label] }}</view>
            </slot>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>

  <!-- 使用示例 -->
  <!-- <uv-form-item label="产品名称：" prop="productId" required>
    <mt-input-select
      v-model="modelForm.productId"
      :list="dataList"
      :remote-method="handleRemoteMethod"
      :maxlength="50"
      placeholder="请输入产品名称"
      :content-style="{ top: '60rpx', left: '-232rpx', right: '-146rpx' }"
    >
    </mt-input-select>
  </uv-form-item> -->
</template>

<script setup>
const props = defineProps({
  maxlength: {
    type: Number,
    default: -1
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  inputBorder: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: ''
  },
  list: {
    // 数据源
    type: Array,
    default: () => []
  },
  label: {
    type: String,
    default: 'name'
  },
  value: {
    type: String,
    default: 'id'
  },
  contentStyle: {
    type: Object,
    default: () => {
      return { top: '60rpx', left: 0, right: 0 };
    }
  },
  remoteMethod: {
    type: Function,
    default: null
  }
});
const dataList = ref([]);
watch(
  () => props.list,
  (newVal) => {
    dataList.value = newVal;
  },
  { deep: true, immediate: true }
);
const keyword = ref('');
// 选中的结果id
const checkId = defineModel({ type: [String, Number] });
const showSelect = ref(false);

function handleClear() {
  keyword.value = '';
  checkId.value = '';
  showSelect.value = false;
}

async function handleInput(e) {
  const val = e.detail.value.trim();
  if (props.remoteMethod && typeof props.remoteMethod === 'function') {
    await props.remoteMethod(val);
  }
  showSelect.value = dataList.value.length > 0;
  if (checkId.value) {
    checkId.value = '';
  }
}

function handleClickItem(row) {
  checkId.value = row[props.value];
  keyword.value = row[props.label];
  showSelect.value = false;
}

onUnload(() => {
  showSelect.value = false;
});

/**
 * 使用示例
function handleRemoteMethod(val) {
  const arr = [
    { name: '黄忠', id: 1 },
    { name: '黄子', id: 2 },
    { name: '李白', id: 3 },
    { name: '李欣', id: 4 },
    { name: '互动', id: 5 },
    { name: '口袋', id: 6 },
    { name: '看到', id: 7 },
    { name: '得到', id: 8 },
    { name: '都是', id: 9 }
  ];
  const res = arr.filter((son) => son.name.includes(val));
  if (val) {
    dataList.value = res;
  } else {
    dataList.value = arr;
  }
}
 */
</script>

<style lang="scss" scoped>
.mt-input-select_mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background-color: transparent;
}
.mt-input-select_content {
  position: relative;
  z-index: 8;
  .input-box {
    position: relative;
    border: 2rpx solid #e4e4e4;
    border-radius: 8rpx;
    &.no-border {
      border: none;
    }
    .ipt {
      font-size: 28rpx;
      color: #1c213e;
      height: 50rpx;
      padding: 0 50rpx 0 12rpx;
    }
    .close {
      position: absolute;
      right: 10rpx;
      top: 50%;
      width: 30rpx;
      height: 30rpx;
      transform: translateY(-50%);
    }
  }
  .mt-input-select_box {
    position: absolute;
    background-color: #ffffff;
    border-top: 1px solid #ebeef5;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .select-li {
      padding: 30rpx 32rpx;
      font-size: 28rpx;
      color: #1c213e;
    }
  }
}
</style>
